import { useState } from "react";
import KanbanCard from "./KanbanCard";
import { NewKanbanCard } from "./NewKanbanCard";

export default function KanbanColumn({
  children,
  className,
  setIsDragSource = () => { },
  setIsDragTarget = () => { },
  onDrop,
  cardList = [],
  title,
  setDraggedItem,
  canAddNew,
  onAdd,
  onRemove
}) {
  const combinedClassName = `kanban-column ${className}`;

  const [showAdd, setShowAdd] = useState(false)
  const handleAdd = (evt) => {
    setShowAdd(true)
  };
  const handleSubmit = (newCard) => {
    onAdd && onAdd(newCard)
    setShowAdd(false)
  }

  return (
    <section
      className={combinedClassName}
      onDragStart={() => setIsDragSource(true)}
      onDragOver={(evt) => {
        evt.preventDefault();
        evt.dataTransfer.dropEffect = "move";
        setIsDragTarget(true);
      }}
      onDragLeave={(evt) => {
        evt.preventDefault();
        evt.dataTransfer.dropEffect = "none";
        setIsDragTarget(false);
      }}
      onDrop={(evt) => {
        evt.preventDefault();
        onDrop && onDrop(evt);
      }}
      onDragEnd={(evt) => {
        evt.preventDefault();
        setIsDragSource(false);
        setIsDragTarget(false);
      }}
    >
      <h2>{title}
        <button onClick={handleAdd} disabled={showAdd}>&#8853;添加新卡片</button>
      </h2>
      <ul>
        {canAddNew && showAdd && <NewKanbanCard onSubmit={handleSubmit} />}
        {cardList.map((props, index) => (
          <KanbanCard
            key={index}
            onDragStart={() => setDraggedItem && setDraggedItem(props)}
            onRemove={onRemove}
            {...props}
          />
        ))}
      </ul>
    </section>
  );
}
